import React, { useState,useContext } from "react";
import {Button,Form,Input,Toast} from "antd-mobile";
import { MyContext } from "../../App";
import Header from "../../components/Header/Header";
import { reqlogin } from "../../http/api";
import {actions} from "../../reducer/app"

const Login = (props) => {
  const [user, setUser] = useState({
    phone: "",
    password: "",
  });

const { dispatch } = useContext(MyContext);

const doLogin =() =>{
  reqlogin(user).then((res)=>{
    if(res.data.code === 200){
      Toast.show({
        content:res.data.msg,
      });
      dispatch(actions.changeUserInfo(res.data.list));
      props.history.push("/index/home");
    }
  })
}
    return (
      <div>
        <Header register title="登录"></Header>
        {/* 2.数据绑定  */}
        <div>user:{JSON.stringify(user)}</div>
        <Form layout="horizontal">
          <Form.Item label="手机号" name="username">
            <Input
              placeholder="请输入手机号"
              clearable
              onChange={(v) =>
                setUser({
                  ...user,
                  phone: v,
                })
              }
            />
          </Form.Item>
          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              onChange={(v) =>
                setUser({
                  ...user,
                  password: v,
                })
              }
            />
          </Form.Item>
        </Form>
        <Button size="small" color="primary" onClick={() => doLogin()}>
          登录
        </Button>
      </div>
    );
};
export default Login;
